<template>
  <view class="v-container">
    <!-- 顶部导航栏 -->
    <view class="v-nav-bar flex items-center justify-between px-4 py-3 border-b bg-white">
      <view class="v-nav-back" @click="goBack">
        <i class="fa fa-arrow-left text-gray-600"></i>
      </view>
      <view class="v-nav-title text-center font-bold">选择创建主题</view>
      <view class="w-8"></view>
    </view>

    <!-- 主题分类区域 -->
    <view class="v-category-container px-4 py-4">
      <view class="v-category-tabs grid grid-cols-4 gap-2">
        <button class="v-category-tab" :class="{ 'active': selectedCategory === 'all' }" @click="selectCategory('all')">
          <view class="flex flex-col items-center">
            <i class="fa fa-th-large mb-1"></i>
            <text class="text-xs">全部主题</text>
          </view>
        </button>
        <button class="v-category-tab" :class="{ 'active': selectedCategory === 'general' }" @click="selectCategory('general')">
          <view class="flex flex-col items-center">
            <i class="fa fa-paint-brush mb-1"></i>
            <text class="text-xs">通用主题</text>
          </view>
        </button>
        <button class="v-category-tab" :class="{ 'active': selectedCategory === 'competition' }" @click="selectCategory('competition')">
          <view class="flex flex-col items-center">
            <i class="fa fa-trophy mb-1"></i>
            <text class="text-xs">赛事评比</text>
          </view>
        </button>
        <button class="v-category-tab" :class="{ 'active': selectedCategory === 'festival' }" @click="selectCategory('festival')">
          <view class="flex flex-col items-center">
            <i class="fa fa-calendar mb-1"></i>
            <text class="text-xs">节日节气</text>
          </view>
        </button>
        <button class="v-category-tab" :class="{ 'active': selectedCategory === 'children' }" @click="selectCategory('children')">
          <view class="flex flex-col items-center">
            <i class="fa fa-child mb-1"></i>
            <text class="text-xs">儿童萌娃</text>
          </view>
        </button>
        <button class="v-category-tab" :class="{ 'active': selectedCategory === 'excellent' }" @click="selectCategory('excellent')">
          <view class="flex flex-col items-center">
            <i class="fa fa-star mb-1"></i>
            <text class="text-xs">优秀评选</text>
          </view>
        </button>
        <button class="v-category-tab" :class="{ 'active': selectedCategory === 'patriotic' }" @click="selectCategory('patriotic')">
          <view class="flex flex-col items-center">
            <i class="fa fa-flag mb-1"></i>
            <text class="text-xs">爱党爱国</text>
          </view>
        </button>
        <button class="v-category-tab" :class="{ 'active': selectedCategory === 'new' }" @click="selectCategory('new')">
          <view class="flex flex-col items-center">
            <i class="fa fa-bolt mb-1"></i>
            <text class="text-xs">最新上架</text>
          </view>
        </button>
      </view>
    </view>

    <!-- 自定义活动按钮 -->
    <view class="v-custom-activity-container px-4 py-2">
      <button class="v-custom-activity-btn">+ 创建自定义投票</button>
    </view>

    <!-- 模板列表区域 - 添加了margin-top -->
    <view class="v-template-container px-4 py-6 mt-6 bg-white">
      <view class="v-template-grid grid grid-cols-3 gap-4">
        <view v-for="(template, index) in templates" :key="index" class="v-template-card rounded-xl overflow-hidden shadow-sm" :class="`bg-${template.colorClass}`">
          <view class="v-template-header h-40"></view>
          <view class="v-template-footer p-4 bg-white">
            <button class="v-template-btn w-full">立即使用</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 存储当前选中的主题分类
const selectedCategory = ref('all');

// 模板数据
const templates = ref([
  { colorClass: 'red-500' },
  { colorClass: 'blue-500' },
  { colorClass: 'green-500' },
  { colorClass: 'orange-500' },
  { colorClass: 'purple-500' },
  { colorClass: 'red-600' },
  { colorClass: 'red-500' },
  { colorClass: 'blue-500' },
  { colorClass: 'green-500' },
  { colorClass: 'orange-500' },
  { colorClass: 'purple-500' },
  { colorClass: 'red-600' },
]);

// 主题分类选择
const selectCategory = (category) => {
  selectedCategory.value = category;
};

// 返回上一页
const goBack = () => {
  window.history.back();
};
</script>

<style scoped>
/* 基础容器 */
.v-container {
  min-height: 100vh;
  background-color: #f7f8fa;
}

/* 导航栏 */
.v-nav-bar {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.v-nav-back {
  padding: 8px;
  cursor: pointer;
}

.v-nav-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

/* 分类区域 */
.v-category-container {
  background-color: #fff;
  margin-bottom: 16px;
}

.v-category-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.v-category-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border-radius: 8px;
  background-color: #f5f5f5;
  color: #333;
  transition: all 0.3s ease;
}

.v-category-tab.active {
  background-color: #3498DB;
  color: #fff;
}

.v-category-tab i {
  font-size: 18px;
  margin-bottom: 4px;
}

/* 自定义活动按钮 */
.v-custom-activity-container {
  padding: 0 16px;
}

.v-custom-activity-btn {
  width: 100%;
  padding: 12px 0;
  background-color: #2ECC71;
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

/* 模板区域 - 添加了margin-top */
.v-template-container {
  margin-top: 24px;
}

.v-template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.v-template-card {
  transition: transform 0.3s ease;
}

.v-template-card:hover {
  transform: translateY(-4px);
}

.v-template-header {
  height: 100px;
}

.v-template-footer {
  padding: 12px;
}

.v-template-btn {
  padding: 8px 0;
  background-color: #3498DB;
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
}

/* 颜色类 */
.bg-red-500 { background-color: #FF5733; }
.bg-blue-500 { background-color: #3498DB; }
.bg-green-500 { background-color: #2ECC71; }
.bg-orange-500 { background-color: #F39C12; }
.bg-purple-500 { background-color: #8E44AD; }
.bg-red-600 { background-color: #E74C3C; }
</style>